<%--
  Created by IntelliJ IDEA.
  User: abcc
  Date: 2019/10/3
  Time: 13:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<div class="page">
    <a href="javascript:goPage(1)">首页</a>

    <%--<=上一页做判断  到达第一页之后 不可以在点击了--%>
    <c:if test="${requestScope.focuPage.pageNum>1}">
        <a href="javascript:goPage(${requestScope.focuPage.pageNum-1})" class="prev">&lt;</a>
    </c:if>
    <c:if test="${requestScope.focuPage.pageNum<=1}">
        <a href ="javascript:return false;" onclick="return false;">&lt;</a>
    </c:if>

    <c:if test="${requestScope.focuPage.pageNum+4<requestScope.focuPage.pages}">
        <c:set var="startPage" value="${requestScope.focuPage.pageNum}"></c:set>
    </c:if>
    <c:if test="${requestScope.focuPage.pageNum+4>=requestScope.focuPage.pages}">
        <c:set var="startPage" value="${requestScope.focuPage.pages-4}"></c:set>
    </c:if>

    <%--标签页码循环  begin和end指定标签页码--%>
    <%--要判断startPage为负数的情况--%>
    <c:forEach begin="${startPage<=0?1:startPage}" end="${startPage+4}" var="n">
        <a <c:if test="${requestScope.focuPage.pageNum == n}"> class="active"</c:if>href="javascript:goPage(${n})">${n}</a>
    </c:forEach>


    <%--下一页  进行判断 到达尾页 就不能在点了--%>
    <c:if test="${requestScope.focuPage.pageNum<requestScope.focuPage.pages}">
        <a href="javascript:goPage(${requestScope.focuPage.pageNum+1})" class="next">&gt;</a>
    </c:if>

    <c:if test="${requestScope.focuPage.pageNum>=requestScope.focuPage.pages}">
       <a href ="javascript:return false;" onclick="return false;">&gt;</a>
    </c:if>
    <a href="javascript:goPage(${requestScope.focuPage.pages})">尾页</a>

    <a style="border:0px;padding-top: 0px">
        <%--给一个选择事件  没变换一次 触发一次事件  把变换的对象传出去--%>
        <select class="form-control" id="sizeSelect" onchange="chpageSize(this)">
            <%--考虑到数据的回显问题  利用c标签  必须要有value  用于后面获取值--%>
            <option value="2" <c:if test="${requestScope.focuPage.pageSize == 2}">selected</c:if>>2</option>
            <option value="4" <c:if test="${requestScope.focuPage.pageSize == 4}">selected</c:if>>4</option>
            <option value="6" <c:if test="${requestScope.focuPage.pageSize == 6}">selected</c:if>>6</option>
            <option value="8" <c:if test="${requestScope.focuPage.pageSize == 8}">selected</c:if>>8</option>
            <option value="10" <c:if test="${requestScope.focuPage.pageSize == 10}">selected</c:if>>10</option>
        </select>
    </a>
    <a href="#">当前页${requestScope.focuPage.pageNum}/总页码${requestScope.focuPage.pages}</a>
</div>


<script>
    // 同页面写js函数 无需引入hidden input  传输路径 方便  耦合性高
    var path = $("#path").val();
    function goPage(pages) {
        //获取每页显示条数  俩句话都可以  但是前者是jQuery的写法 简介
        var pagesize = $("#sizeSelect").val();
        //数据发送到后台
        // alert("ala");
        layer.load(1, {time: 10*1000});
        $("#foc1").load(path+'/info/focu',{id:${sessionScope.user.id},pageNum:pages,pageSize:pagesize},function () {
           layer.closeAll();
        });

    }

    // 重新选择每页条数  选择之后  回到首页(pageNum==1)  但是要带上模糊查询的条件
    //业务逻辑 ---> 先查再选!  先选择查询条件  在选择每页显示条数
    function chpageSize(obj) {
        // 异步分页
        // alert("ggg");
        layer.load(1, {time: 10*1000});
        $("#foc1").load(path+'/info/focu',{id:${sessionScope.user.id},pageNum:1,pageSize:obj.value},function () {
            layer.closeAll();
        })

    }

</script>
</body>
</html>
